<template>
  <div>
    <h1>常用指令：</h1>
    <h2>1、v-text:</h2>
    <div v-text="message"></div>
    <div v-text="message"></div>

    <h2>2、v-html:</h2>
    <div v-html="message"></div>

    <h2>3、v-bind:</h2>
    <div v-bind:title="title"></div>
    <div><a v-bind:href="href">页面跳转</a></div>
    <div><img :src="src" /></div>
    <div><button :disabled="disabled">禁用按钮</button></div>

    <h2>4、v-on:</h2>
    <el-button type="primary" v-on:click="hello">hello</el-button>

    <h2>5、v-model:</h2>
    <label>年龄：</label>
    <el-input v-model="age" />
    <el-button type="primary" v-on:click="add">增加</el-button>

    <h2>6、v-pre:</h2>
    <div v-pre>当前输入的年龄是: {{age}}</div>
    <div>当前输入的年龄是: {{age}}</div>

    <h2>7、v-once:</h2>
    <el-input v-model="age" />
    <div v-once>当前输入的年龄是: {{age}}</div>
    <div>当前输入的年龄是: {{age}}</div>

    <h2>8、v-if、v-else-if、 v-else:</h2>
    <div v-if="number === 1"> A</div>
    <div v-else-if="number === 2"> B </div>
    <div v-else> C</div>

    <h2>9、v-if、v-else-if、 v-else:</h2>
    <div>
      <el-button type="primary" id="show" v-show="deleteButton">v-show控制</el-button>
      <el-button type="primary" v-on:click="deleteButton = true">设置显示</el-button>
      <el-button type="primary" v-on:click="deleteButton = false">设置隐藏</el-button>
    </div>
    <div>
      <el-button type="primary" id="if" v-if="editButton">v-if控制</el-button>
      <el-button type="primary" v-on:click="editButton = true">设置显示</el-button>
      <el-button type="primary" v-on:click="editButton = false">设置隐藏</el-button>
    </div>

    <h2>10、v-for 对数组进行循环渲染</h2>
    <div>
      <ul>
        <li v-for="(item,index) in bools" :key="index">{{index}} - {{item.name}}</li>
      </ul>
    </div>

    <h2>11、v-for 对对象进行循环渲染</h2>
    <div>
      <ul>
        <li v-for="(value,key,index) in user" :key="index">{{index}} - {{key}} : {{value}}</li>
      </ul>
    </div>

  </div>

</template>

<script>
export default {
  name: 'componentCommunication',

  data () {
    return {
      message: "<h1>您好，我是AITesting！</h1>",

      number: 1,

      deleteButton: false,
      editButton: false,

      age: 10,
      title: "您好，我是阿森",
      href: 'http://39.100.139.181:8080/#/dashboard',
      src: 'http://39.100.139.181:8080/static/img/weixin.575d35cd.png',
      disabled: true,

      bools: [{
        name: '慧测小课'
      }, {
        name: '测试开发之道'
      }, {
        name: '慧测自动化测试'
      }],

      user: {
        name: 'asen',
        gender: '男',
        age: '28'

      },
    }
  },

  methods: {
    hello () {
      alert('hello')
    },

    add () {
      this.age = this.age + 1;
    }
  },

  mounted () {
    console.log(1111111);

  },


  created () {
    console.log(2222222);
  }

}
</script>

<style scoped>
</style>
